<template>
    <div class="home-main">
        <nav-com :navText="navText" :navTextDes="navTextDes"></nav-com>
        <div class="content" :style="{ minHeight: height-130+'px'}">
            <nav-bar :navBarText="navBarText"></nav-bar>

            <div class="window-list">
                <ul>
                    <li v-for="(item,index) in windowList"
                        :key="index"
                        @click="routerPush(item)"
                        >{{item.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import navCom from '@/components/nav-com.vue';
    import navBar from '@/components/nav-bar.vue';
    import { windowlist, choosewindow} from '@/api/inoculate/inoculate';

    export default {
        components: {
            navCom,
            navBar
        },
        data () {
            return {
                navText: '接种挂号',
                navTextDes: '窗口选择',
                navBarText: '窗口选择',
                height: document.documentElement.clientHeight,
                windowList: []
            }
        },
        mounted(){
          this.getData();
        },
        methods:{
            getData(){
                windowlist().then((res) => {
                    // console.log(res.data)
                    if (res.data.error==0) {  //多个窗口，需要进行选择
                        this.windowList=res.data.list;
                    } else if (res.data.error==2) {  //有切仅有一个窗口，直接进入挂号列表页面
                        this.$router.push({path: 'registration'});
                    } else if (res.data.error==1) { //没有窗口，进行错误提示

                    }
                })
            },
            routerPush(item){
                let that = this;

                choosewindow({
                    wid: item.id
                }).then((res) => {
                    if (res.data.error == 0) {
                        that.$router.push({path: 'registration'});
                    } else {
                       this.$Message.error(res.data.message);
                    }
                })
            }
        }
    }
</script>

<style lang="less">
    .home-main{
        .content{
            background: #fff;
            padding:20px 10px;
            .window-list{
                margin: 30px 0 0 10px;
                ul{
                    li{
                        list-style: none;
                        background:rgba(247,249,255,1);
                        border:1px solid rgba(93,141,251,1);
                        display: inline-block;
                        padding:0 66px;
                        height:98px;
                        text-align: center;
                        font-size:36px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:rgba(52,196,187,1);
                        line-height:98px;
                        margin: 0 40px 40px 0;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>
